<template>
  <KView class="recommend-good-comp">
    <KScrollView scroll-x scroll-with-animation lower-threshold="20px" style="height:100%" @scrolltolower="updateData">
      <KView class="recommend-good-data">
        <goods-item v-for="goods in goodsList" :key="'goods_'+goods.id" :goods="goods" @buy-goods="buyoods" @item-click="itemClick"></goods-item>
        <KView class="recommend-good-nodata" v-if="pagination.hasNextPage()">
          <sys-loading :size="50"></sys-loading>
        </KView>
      </KView>
    </KScrollView>
  </KView>
</template>

<script>
  import SysLoading from 'common/sysLoading';
  import GoodsItem from './goodsItem';

  export default {
    props: {
      goodsList: {
        type: Array,
        required: true
      },
      pagination: {
        type: Object,
        required: true
      },
      nextDataFun: {
        type: Function,
        required: true
      }
    },

    data() {
      return {
        loading: false
      };
    },

    methods: {
      updateData() {
        if (this.loading) {
          return;
        }

        let pagination = this.pagination;
        if (!pagination.hasNextPage()) {
          return;
        }

        pagination.nextPage();
        this.loading = true;
        this.nextDataFun().then(() => {
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      itemClick(goods) {
        this.$emit('item-detail', goods);
      },

      buyoods(goods) {
        this.$emit('buy-goods',goods)
      }
    },

    components: {
      SysLoading,
      GoodsItem
    }
  };

</script>

<style lang="scss">
  .recommend-good-comp {
    height: 100%;

    .recommend-good-data {
      height: 100%;
      white-space: nowrap;

      .recommend-goods-item {
        display: inline-block;
        margin-right: formatPx(20);

        &:last-child {
          margin-right: 0;
        }
      }

      .recommend-good-nodata {
        display: inline-block;
        width: formatPx(80);
        height: 100%;
        position: relative;
      }
    }
  }

</style>
